<!--时钟图标的弹窗组件-->
<template>
 <!--弹窗最外层的容器-->
 <!-- rgba(255,255,255,0.8) -->
 <div v-show="isShowModifyGroupInfo" id="modifyGroupName" 
    style="
    width: 65%;
    height: 20%;
    margin-top: 50px;
    position: fixed;
    left: 17.5%;
    top: 30%;
    z-index: 200;
    display: flex;">
   <!--弹窗的窗口，遮罩层-->
   <div class="modifyGroupName_content" 
    style="
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0,0.8);
    border-radius: 20px;
    margin: auto;
    position: relative;">
       <!--弹窗头部-->
       <div class="modifyGroupName_title" style="
        padding: 5px;
        text-align:center;
        ">
            <!--插入提示框-->
            <div v-transfer-dom>
        <alert v-model="isShowAlert" > {{alertText}}</alert>
      </div>
            
            <div class="modifyGroupName_alter_input" style="
            height: 25px;
            width: 80%;
            margin: 10% 0 10% 10%;
            border: 2px #1abc9c solid;
            text-align:center;
            border-radius: 50px;
            padding-bottom: 15px;
            ">
                <input v-model="newGroupName" placeholder="请输入新的名称" style="
                width: auto;
                background-color:none;
                ">
            </div>
        </div>
       
         <div class="clock_btn" style="
         display: inline;
         margin-top: 25%;
         ">
           <button style="
            width: 30%;
            height: 25px;
            font-size: 15px;
            color: white;
            background: #1abc9c;
            text-align: center;
            border-radius: 5px;
            "
            @click="cancle">
            取消
            </button>
            <button style="
            width: 30%;
            height: 25px;
            font-size: 15px;
            color: white;
            background: #1abc9c;
            text-align: center;
            border-radius: 5px;
            margin-left: 15px;
            "
            @click="alter">
            修改
            </button>
            
         </div>
   </div>
 </div>
</template>


<script >
import {mapState} from 'Vuex'
import group from 'api/group'

export default {
    props:{
        isShowModifyGroupInfo:{type: Boolean}
    },
    data(){
      return{
        newGroupName: "",
        alertText: "",
        isShowAlert: false,
      }
    },
    components:{
       
    },
    computed:{
      ...mapState(['groupPresent'])
    },
    methods: {
      showAlert(alertText){
          this.isShowAlert = true
          this.alertText = alertText
      },
      closeTip(){
          this.isShowAlert = false
          this.alertText = ''
      },
      cancle(){
          this.$emit('update:isShowModifyGroupInfo',false)
      },
      async alter(){
        if(!/[@#\$%\^&\*]+/g.test(this.newGroupName)){
          const result = await group.postUpdateGroupInfo({
          detail:{
            adminList:this.groupPresent.detail.adminList,
            groupName:this.newGroupName,
            ownerId:this.groupPresent.detail.ownerId,
          },
          groupId: this.groupPresent.groupId
          })
          if(result.code===0){
            //如果失败了显示提示
            this.showAlert(result.message)
          }else{
            this.showAlert(result.data)
            this.$emit('renewGroup',this.newGroupName)
            setTimeout(this.cancle, 1000)
          }
        }else{
          this.showAlert("含有非法字符")
        }
      },
  }
}
</script>
<style>
input::-webkit-input-placeholder{
  color:black;
}
</style>